<template>
  <div class="workspace">
    <el-tabs type="border-card">
      <el-tab-pane label="工单列表">
        <el-row style="margin-bottom: 20px">
          <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
            <el-input size="medium" v-model="searchValue" @input="searchValueChange" placeholder="搜索表单" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
        </el-row>
        <div>
          <div v-for="(item, index) in listData" :key="index" class="form-item" @click="handleClick(item)">
            <span class="panel-icon" :style="`background:${item.background} `">
              <svg-icon :icon-class="item.typeIcon" />
            </span>
            <div>
              <span>{{item.typeName}}</span>
              <span>发起审批</span>
            </div>
          </div>
          <div class="no-data" v-show="listData.length === 0">
            没有找到相关的表单 😥
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <base-component ref="baseRefs" :pageKey="pageKey"></base-component>
  </div>
</template>

<script>

  import { listWorkOrderType } from "@/api/workorder/workOrderType";
	import BaseComponent from '@/views/workorder/components'

  export default {
    name: "workSpace",
		components:{ BaseComponent },
    data() {
      return {
        listData:[],
        searchValue:null,
        queryParams:{
          typeName:null
        },
        open: false,
        pageKey:''
      }
    },
    mounted() {
      this.getListWorkOrderType()
    },
    methods: {
      getListWorkOrderType() {
        listWorkOrderType(this.queryParams).then(res => {
          this.listData = res.rows
        }).catch(err => this.$message.error('获取工单列表异常'))
      },
      searchValueChange(v){
        this.queryParams.typeName = v
        this.getListWorkOrderType()
      },
      handleClick(row){
        this.pageKey = row.associationForm
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          try{
            this.$refs.baseRefs.init({ type:'ADD',orderType: row.id,typeName: row.typeName })
          }catch(e){
            this.msgError("获取工单信息异常,请刷新重新尝试。")
          }
          loading.close();
        }, 1000)
      }
    }
  }
</script>

<style lang="less" scoped>
  .workspace {
    padding: 20px 20px;
    position: relative;

    .back {
      position: absolute;
      left: 20px;
      top: 13px;
    }

    .no-data {
      text-align: center;
      padding: 50px 0;
      color: #656565;
      margin: 0 auto;
    }

    /deep/ .el-collapse {
      padding: 0 15px;
      background: #ffffff;

      .el-collapse-item__header {
        font-size: medium;
      }

      .el-collapse-item__wrap {
        padding: 20px 10px;
      }

      .el-tabs--border-card .el-tabs__content {
        padding: 40px 15px;
      }
    }

    .form-item {
      padding: 15px 10px;
      width: 200px;
      cursor: pointer;
      border: 1px solid #d9dada;
      border-radius: 5px;
      float: left;
      margin: 5px 10px;

      &:hover {
        border: 1px solid #448ed7;

        span {
          display: inline-block !important;
        }
      }

      .panel-icon{
        display: block;
        float: left;
        background: #38adff;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        text-align: center;
      }

      svg {
        margin-top: 13px;
        font-size: 20px;
        color: #ffffff;
      }

      div {
        height: 45px;
        line-height: 45px;

        span:nth-child(1) {
          margin-left: 10px;
        }

        span:nth-child(2) {
          display: none;
          float: right;
          color: #38adff;
          font-size: 12px;
        }
      }
    }
  }

  @media screen and (max-width: 800px) {
    .form-item {
      padding: 12px 10px !important;
      width: 150px !important;
      margin: 5px !important;

      &:hover {
        span:last-child {
          display: none !important;
        }
      }
    }
  }
</style>
